<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:wb="http://whitebyte.info/components"
	xmlns:c="http://java.sun.com/jsf/composite/composites"
	template="template.xhtml">

	<ui:define name="content">

		<h:outputStylesheet target="head" library="css" name="no_border.css" />

		<p:panel header="Place Info" name="addPlace">
			<p:panelGrid name="placeParameters">
				<p:row>
					<p:column style="width:60%">
						<h:form>
							<h2>#{viewPlaceBean.place.placeName}</h2>
							<p:row>
								<p:panelGrid id="placeInfoPanelId" name="placeInfoPanel"
									columns="2" style="width:100%">

									<p:outputLabel for="country" value="Country" />
									<h:outputText id="country"
										value="#{viewPlaceBean.place.country}" />

									<p:outputLabel for="city" value="City" />
									<h:outputText id="city" value="#{viewPlaceBean.place.city}" />

									<p:outputLabel for="placeName" value="Place Name" />
									<h:outputText id="placeName"
										value="#{viewPlaceBean.place.placeName}" />

									<p:outputLabel for="tags" value="Tags" />
									<h:outputText id="tags" value="#{viewPlaceBean.place.CSVTags}" />

								</p:panelGrid>
							</p:row>

							<p:row>
								<p:panelGrid columns="2" rendered="#{loginBean.loggedIn}">
									<p:row>
										<p:column style="width:20%">
											<p:autoComplete global="FALSE" id="newTags"
												value="#{viewPlaceBean.addedTags}" forceSelection="true"
												completeMethod="#{viewPlaceBean.completeTags}" var="t"
												itemLabel="#{t}" itemValue="#{t}" converter="tagConverter"
												multiple="true" size="30" />
										</p:column>
										<p:column style="width:40%">
											<p:commandButton id="addMoreTagsButton" value="Add Tag(s)"
												update="placeInfoPanelId newTags"
												action="#{viewPlaceBean.addNewTags}" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:row>
						</h:form>
					</p:column>
					<p:column>
						<p:gmap center="#{viewPlaceBean.place.centerInfo}" zoom="17"
							type="HYBRID" id="map" widgetVar="mapWidget"
							style="width:600px;height:400px" model="#{viewPlaceBean.map}">

							<p:ajax event="overlaySelect"
								listener="#{viewPlaceBean.onMarkerSelect}" global="false" />

							<p:gmapInfoWindow>
								<p:outputPanel
									style="text-align:center;display:block;margin:auto:">
									<h:outputText value="#{viewPlaceBean.marker.title}" />
								</p:outputPanel>
							</p:gmapInfoWindow>
						</p:gmap>
					</p:column>
				</p:row>
			</p:panelGrid>
		</p:panel>

		<!-- MULTIMEDIA PART -->

		<p:panel header="Multimedia" toggleable="true" collapsed="true">

			<!-- PICTURE -->

			<p:panel header="Images" toggleable="true" collapsed="true"
				deferred="true">
				<h:form>
					<p:lightBox id="placeMedia_images" styleClass="imagebox">
						<ui:repeat value="#{viewPlaceBean.mediaList}" var="media">
							<ui:fragment rendered="#{media.picture}">
								<h:outputLink
									value="/ourcity-ws/webservice/getMultimedia?id=#{media.multimediaID}">
									<h:graphicImage
										value="../ourcity-ws/webservice/getMultimedia?id=#{media.multimediaID}&amp;width=160&amp;height=90" />
									<p:spacer width="20" />
								</h:outputLink>
							</ui:fragment>
						</ui:repeat>
					</p:lightBox>

					<hr />

					<p:fileUpload rendered="#{loginBean.loggedIn}"
						fileUploadListener="#{viewPlaceBean.handleFileUpload}"
						mode="advanced" dragDropSupport="false" multiple="true"
						update="messages placeMedia_images" sizeLimit="150000"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

					<p:growl id="messages" showDetail="true" />
				</h:form>
			</p:panel>

			<!-- VIDEO -->

			<h:form>
				<p:panel id="videoPanel" header="Videos" toggleable="true"
					collapsed="true" deferred="true">
					<p:growl id="messages-videos" showDetail="true" life="3000" />

					<ui:repeat value="#{viewPlaceBean.mediaList}" var="media">
						<ui:fragment rendered="#{media.video}">
							<h3>#{media.title} - #{media.owner.name}
								#{media.owner.surname}</h3>

							<iframe width="480" height="270" src="#{media.embedURL}"
								frameborder="0" allowfullscreen="true" />

						</ui:fragment>
					</ui:repeat>

					<hr />

					<h:panelGrid columns="2" columnClasses="column" cellpadding="5"
						rendered="#{loginBean.loggedIn}">
						<p:inputText style="width:400px" id="videoURL" label="YouTube URL"
							value="#{viewPlaceBean.videoURL}" placeholder="YouTube URL">
						</p:inputText>
						<p:commandButton value="Add Video" icon="ui-icon-plus"
							action="#{viewPlaceBean.addVideoURL}"
							update="videoPanel videoURL messages-videos" />
					</h:panelGrid>

					<p:growl id="messages" showDetail="true" />
				</p:panel>
			</h:form>

			<!-- AUDIO -->

			<h:form>
				<p:growl id="messages-audios" showDetail="true" life="3000" />

				<p:panel id="audioPanel" header="Audios" toggleable="true"
					collapsed="true" deferred="true">
					<ui:repeat value="#{viewPlaceBean.mediaList}" var="media">
						<ui:fragment rendered="#{media.audio}">
							<h4>#{media.title} - #{media.owner.name}
								#{media.owner.surname}</h4>

							<embed
								src="http://vocaroo.com/player.swf?playMediaID=#{media.path}&amp;autoplay=0"
								width="148" height="44" wmode="transparent"
								type="application/x-shockwave-flash" />
						</ui:fragment>
					</ui:repeat>

					<hr />

					<h:panelGrid columns="3" columnClasses="column" cellpadding="5"
						rendered="#{loginBean.loggedIn}">
						<p:inputText style="width:300px" id="audioTitle" label="Audio URL"
							value="#{viewPlaceBean.audioTitle}" placeholder="Title"
							required="true">
						</p:inputText>
						<p:inputText style="width:400px" id="audioURL" label="Vocaroo URL"
							value="#{viewPlaceBean.audioURL}" placeholder="Vocaroo.com URL"
							required="true">
						</p:inputText>
						<p:commandButton value="Add Audio" icon="ui-icon-plus"
							action="#{viewPlaceBean.addAudioURL}"
							update="audioPanel audioURL audioTitle messages-audios" />
					</h:panelGrid>

					<h:panelGroup rendered="#{loginBean.loggedIn}">
						Currenty, <a href="http://vocaroo.com">Vocaroo.com</a> is used for uploading audio to the system.
					</h:panelGroup>
				</p:panel>
			</h:form>
		</p:panel>

		<!-- ADD EXPERIENCE -->

		<h:form enctype="multipart/form-data">
			<p:growl id="msgs" showDetail="true" life="3000" />

			<p:panel header="Add your experience" id="addExperience"
				rendered="#{loginBean.loggedIn}" toggleable="true" collapsed="true">
				<p:panelGrid columns="2">

					<h:outputLabel for="commentText" value="Your Experience: *" />
					<p:inputTextarea id="commentText" label="Experience"
						value="#{viewPlaceBean.commentText}" rows="5" cols="80"
						autoResize="true"
						validatorMessage="You have to enter your experience" />


					<p:outputLabel for="commentDate" value="Date:" />
					<p:calendar id="commentDate" style="width:100%"
						value="#{viewPlaceBean.commentDate}" navigator="true"
						display="inline" effect="slideDown" />

					<h:outputLabel for="commentTags" value="Tag(s):" />
					<p:autoComplete id="commentTags"
						value="#{viewPlaceBean.commentTags}"
						completeMethod="#{tagCompleteBean.completeTags}" var="t"
						itemLabel="#{t}" itemValue="#{t}" converter="tagConverter"
						multiple="true" global="false" />

					<p:commandButton id="addCommentButton" value="Add Comment"
						update="addExperience experiences msgs"
						action="#{viewPlaceBean.addComment}" />
				</p:panelGrid>
			</p:panel>

			<!-- SEARCH EXPERIENCES -->

			<p:panel header="Search on experiences" toggleable="true"
				id="commentSearchPanel" collapsed="true">
				<p:panelGrid name="searchCommentPanel" columns="2"
					style="width:100%">
					<h:outputLabel for="commentSearchText" value="Comment:"
						style="width:30%" />
					<p:inputText id="commentSearchText"
						value="#{viewPlaceBean.commentSearchText}" cols="80" />

					<h:outputLabel for="commentSearchTag" value="Tag:" />
					<p:autoComplete id="commentSearchTag"
						value="#{viewPlaceBean.commentSearchTags}"
						completeMethod="#{tagCompleteBean.completeTags}" var="t"
						itemLabel="#{t}" itemValue="#{t}" converter="tagConverter"
						multiple="true" global="false" />

					<p:outputLabel for="fromDate" value="From Date:" />
					<p:calendar id="fromDate" value="#{viewPlaceBean.fromDate}"
						navigator="true" display="inline" effect="slideDown" />

					<p:outputLabel for="toDate" value="To Date:" />
					<p:calendar id="toDate" value="#{viewPlaceBean.toDate}"
						navigator="true" display="inline" effect="slideDown" />

					<p:commandButton id="searchCommentButton" value="Search Comment"
						update="experiences commentSearchPanel msgs"
						action="#{viewPlaceBean.searchComment}" />
				</p:panelGrid>
			</p:panel>

			<!-- LIST OF EXPERIENCES -->

			<p:dataList id="experiences" value="#{viewPlaceBean.comments}"
				var="c" type="definition" paginator="true" rows="10"
				paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="10,25,50">

				<p:panelGrid columns="3">

					<p:panel header="User" style="text-align:center; width:170px;">

						<img class="img-circle" data-src="holder.js/140x140" alt="140x140"
							style="width: 140px; height: 140px;"
							src="" />
						<br />
						<a href="/ourcity/home.xhtml?userID=#{c.user.userID}">#{c.user.name}
							#{c.user.surname}</a>
						<br />
								#{c.date}
						
						</p:panel>

					<p:panel header="Comment" style="width:590px">
					<a href="/ourcity/comment.xhtml?commentId=#{c.commentID}">#{c.comment}</a>
					
						</p:panel>

					<p:panel header="Tags" style="width:300px">
							#{c.getCSVTags()}
						</p:panel>

				</p:panelGrid>
			</p:dataList>

		</h:form>

	</ui:define>
</ui:composition>
